<script lang="ts" setup>
import { addPropertyBill, deletePropertyBill, getBudgetAmount, getBuildinglist, getEnterpriseList, getPropertyBillDetail, getPropertyList } from '@/api/property';
import type { addPropertyBillParams, enterpriseRow, propertyBillDetail, PropertyListParams, propertyRow } from '@/types/property';
import { ElMessage, type FormInstance } from 'element-plus';
import type { FormRules } from 'element-plus/lib/components/index.js';
import { onMounted, ref, watch } from 'vue'
const params=ref<PropertyListParams>({
  page: 1,
  pageSize: 10,
  start: '',
  end: '',
  enterpriseName: ''
})
const timeList=ref<string[]>([])
watch(timeList,()=>{
  if(timeList.value.length>0){
    params.value.start=timeList.value[0]
    params.value.end=timeList.value[1]
  }else{
    params.value.start=''
    params.value.end=''
  }
})
// 渲染列表
const list=ref<propertyRow[]>([])
const total=ref<number>(0)
const getList=async()=>{
  const res=await getPropertyList(params.value)
  list.value=res.data.rows
  total.value=res.data.total
}
onMounted(()=>{
  getList()
  getEnterpriselist()
})
const search=()=>{
  getList()
  timeList.value=[]
}
// 添加账单
const dialogVisible=ref<boolean>(false)
// 添加账单表单
const form=ref<addPropertyBillParams>({
  enterpriseId: null,
  buildingId: null,
  endTime: '',
  paymentAmount: null,
  paymentMethod: null,
  startTime: '',
})
// 企业列表
  const enterList=ref<enterpriseRow[]>([])
// 楼宇列表
const buildingList=ref<enterpriseRow[]>([])
const getEnterpriselist= async ()=>{
  const res=await getEnterpriseList()
  enterList.value=res.data
  const res2=await getBuildinglist()
  buildingList.value=res2.data
}
const rules=ref<FormRules<addPropertyBillParams>>({
  enterpriseId: [{ required: true, message: '请选择租户', trigger: 'blur' }],
  buildingId: [{ required: true, message: '请选择租赁楼宇', trigger: 'blur' }],
  endTime: [{ required: true, message: '请选择缴费周期', trigger: 'blur' }],
  paymentAmount: [{ required: true, message: '请输入支付金额', trigger: 'blur' }],
  paymentMethod: [{ required: true, message: '请选择支付方式', trigger: 'blur' }],
})
// 预算金额
const times=ref<string[]>([])
watch(times,(value)=>{
  if(value){
    form.value.startTime=value[0]
    form.value.endTime=value[1]
  }else{
    form.value.startTime=''
    form.value.endTime=''
  }
})

const GetBudgetAmount = async () => {
  if (!form.value.buildingId) return
  const res = await getBudgetAmount({
    buildingId: form.value.buildingId,
    startTime: form.value.startTime,
    endTime: form.value.endTime
  })
  form.value.paymentAmount = res.data
  console.log('❤️res',res);

}
watch([form.value.buildingId,times],()=>{
  GetBudgetAmount()
})
// 添加账单--提交
const formRef=ref<FormInstance>()
const submit=async()=>{
 await formRef.value?.validate()
  await addPropertyBill(form.value)
  dialogVisible.value=false
  getList()
}
const detaile=ref<propertyBillDetail>()
const lookAccout=ref<boolean>(false)
const LookPark=async (id:number)=>{
  const res = await getPropertyBillDetail(id)
  detaile.value=res.data
  lookAccout.value=true
}
// 删除
const Delay=async (id:number)=>{
  const res= await deletePropertyBill(id)
  if(res.code===10000){
    ElMessage.success(res.msg)
    getList()
  }else{
    ElMessage.error(res.msg)
  }
}
</script>


<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">企业名称:</span>
      <el-input v-model="params.enterpriseName" clearable placeholder="请输入内容" class="search-main" />
      <div class="time-container">
        <span class="search-label">缴费时间:</span>
        <el-date-picker v-model="timeList"
        style="width: 300px;"
         value-format="YYYY-MM-DD"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="true"
        class="search-main"
        @change="getList"
        />
      </div>
      <el-button type="primary" class="search-btn" @click="search">查询</el-button>
      {{ params }}
    </div>
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="dialogVisible=true">添加账单</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="list">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column label="账单编号" prop="billNumber" />
        <el-table-column label="企业名称" prop="enterpriseName" />
        <el-table-column label="租赁楼宇" prop="buildingName" />
        <el-table-column label="物业费(元/㎡)" prop="propertyFeePrice" />
        <el-table-column label="账单金额(元)" prop="paymentAmount" />
        <el-table-column label="缴费时间" prop="createTime" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="LookPark(row.id)">查看</el-button>
            <el-button size="small" type="text" @click="Delay(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
       :page-sizes="[1, 2, 3, 4, 5]"
       v-model:page-size="params.pageSize"
       v-model:current-page="params.page"
      @change="getList"
       />
    </div>
    <div class="dialog-container" >
      <el-dialog v-model="dialogVisible" title="添加账单" width="580px" >
        <div class="form-container" >
          <el-form  class="form-main" label-position="top" :model="form" :rules="rules" ref="formRef">
          <el-form-item label="选择租户" prop="enterpriseId">
            <el-select v-model="form.enterpriseId as number" placeholder="请选择租户">
              <el-option v-for="item in enterList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-select v-model="form.buildingId as number" placeholder="请选择租赁楼宇">
              <el-option v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="缴费周期" prop="endTime">
            <el-date-picker
             v-model="times"
            style="width: 300px;"
             value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item label="支付金额" prop="paymentAmount">
            <el-input v-model="form.paymentAmount" placeholder="请输入支付金额" :disabled="true" />
          </el-form-item>
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="form.paymentMethod as number">
              <el-option label="支付宝" value="1" />
              <el-option label="微信" value="2" />
              <el-option label="现金" value="3" />
            </el-select>
          </el-form-item>
        </el-form>
        </div>

        <template #footer>
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button type="primary" @click="dialogVisible=false">取消</el-button>
        </template>
      </el-dialog>

    </div>
    <div class="look-accout">
      <el-dialog  title="查看账单" width="580px" v-model="lookAccout" >
        <div class="bill-details">
          <div class="detail-item">
            <span class="label">租户名称:</span>
            <span class="value">{{ detaile?.enterpriseName }}</span>
          </div>
          <div class="detail-item">
            <span class="label">租赁楼宇:</span>
            <span class="value">{{ detaile?.buildingName }}</span>
          </div>
          <div class="detail-item">
            <span class="label">缴费周期:</span>
            <span class="value">{{detaile?.startTime+'--'+detaile?.endTime  }}</span>
          </div>
          <div class="detail-item">
            <span class="label">物业费(元/㎡):</span>
            <span class="value">{{detaile?.propertyFeePrice }}</span>
          </div>
          <div class="detail-item">
            <span class="label">账单金额(元):</span>
            <span class="value">{{detaile?.paymentAmount  }}</span>
          </div>
          <div class="detail-item">
            <span class="label">支付方式:</span>
            <span class="value">{{ detaile?.paymentMethod }}</span>
          </div>
          <div class="detail-item">
            <span class="label">缴费时间:</span>
            <span class="value">{{ detaile?.createTime }}</span>
          </div>
        </div>
        <template #footer>
          <el-button type="primary" @click="dialogVisible=false">关闭</el-button>
          <el-button type="primary" @click="dialogVisible=false">确定</el-button>
        </template>
        </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-main {
    width: 220px;
    margin-right: 10px;
  }

  .search-btn {
    margin-left: 20px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
.form-main {
width: 360px;
}

.bill-details {
  padding: 20px 30px;

  .detail-item {
    display: flex;
    margin-bottom: 20px;
    font-size: 14px;

    .label {
      color: #909399;
      width: 120px;
      text-align: right;
      margin-right: 8px;
    }

    .value {
      color: #606266;
    }
  }
}

// 修改弹窗底部按钮样式
:deep(.el-dialog__footer) {
  text-align: center;
  padding-bottom: 30px;
}
</style>